<!DOCTYPE html>

{% load static %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<html lang="en">

  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <title>FreeLabel - PASCAL</title>
  
  <style type="text/css">
      #container { position: relative; }
      #imageView { border: 1px solid #000;}
      #imageTemp { position: absolute; top: 1px; left: 1px;}
      #accId { display: inline-block; vertical-align: top;}

      .noselect {
        -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
           -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Firefox */
              -ms-user-select: none; /* Internet Explorer/Edge */
                  user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome and Opera */
      }

      .myprogressBar {
        width: 200px;
        height: 20px;
        background-color: #ddd;
      }

      .mybar {
        width: 1%;
        height: 20px;
        background-image: url('/static/images/colorbar.svg');
        background-size: 200px 20px;
        text-align: right;
      }

      .timeProgressBar {
        width: 600px;   
        background-color: #ddd;
      }

      .timeBar {
        width: 1%;
        height: 30px;
        background-color: #4CAF50;
        text-align: right;
        color: white;
      }

      .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        /*background-color: rgba(0,0,0, 0.9);*/
        overflow-x: hidden;
        transition: 0.5s;
      }

      .timer {
       font-size: 2.5em;
       padding: 10px;
       text-align: center;
       margin: 0 auto;
       background: #ccc;
       }  

  </style>
  </head>
  
  <body>
  {% if user.is_authenticated %}
    <a href="/freelabel/register/">Guide page</a> 
    <a href="/freelabel/logout/">Logout</a>
  {% else %}  
    <a href="/freelabel/register/">Go back to Register </a><br />
    <a href="/freelabel/login/">Login</a><br />
  {% endif %}

  <br/>
  <div id="codeContainer" style="display: inline-block; position: relative; vertical-align:top;">
    <span id="codeId"></span>
  </div>   
  <div id="topScorersDiv" class="noselect" style="display: inline-block; position: relative; vertical-align:top;">
    <span id="listAvgScoresId">  </span>
  </div>  
  <br/><br/>

  <div id="outputContainer" class="noselect" style="display: inline-block; position: relative; vertical-align:top;">
    <span id="outputPathId"></span>
  </div>
  <br/>

  <div id="scoreContainer" class="noselect" style="display: inline-block; position: relative; vertical-align:top;">
    <span id="imgId"></span>
  </div>   
  <!--   <div id="progressTime" class="timeProgressBar">
    <div id="barTime" class="timeBar"> 0s  </div>
    <div id="txtBonus" style="float: right;"> 2x  </div>
  </div>

  <button type="button" id="btnPause" onclick="pause(); ">Pause (timer)</button>  
  <button type="button" id="btnSkip" onclick="skip();">Skip</button>
  <!-- Navigation window that shows up for pause and videos -->
    <button type="button" id="btnFinish" onclick="finish();">Finish</button>

  <button type="button" id="btnNxtImg" onclick="nextImage();" style="visibility: hidden">Next Image</button>
  
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  </div>

  <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  </div>

  <script>
  function openNav() {
    document.getElementById("myNav").style.width = "100%";
  }

  function closeNav() {
    document.getElementById("myNav").style.width = "0%";
  }
  </script>

  <!-- tools for drawing -->
  <p></p>
  <div id="commandsDiv" class="noselect">
    <button type="button" id="btnUndo" onclick="undoTrace();" style="visibility: hidden">Undo</button>
    <button type="button" id="btnReload" onclick="reloadImage();">Reload (clear)</button>    
   
    <label>Tool: <select id="dtool">
      <option value="pencil">Pencil</option>  
      <option value="line">Line</option>
      <option value="circle">Circle</option>
      <option value="rect">Rectangle</option>
    </select></label>

    <!-- option list for all objects in image -->
    <label id ="objects">Category: <select id="dcolor">
      <option id="opt0" value=0 onclick="document.getElementById('objects').style.color = 'grey'">Eraser</option>
      <option id="opt1" value=1 onclick="document.getElementById('objects').style.color = 'black'">Background</option>
    </select></label>
    <button type="button" id="btnAddCat" onclick="addCategory();">+</button>

    <label>Size: <select id="dsize">
      <option value=1>Small</option>  
      <option value=2>Normal</option>  
      <option value=4>Large</option>  
      <option selected value=8>Huge</option>
      <option value=9 id ="optFill" style="visibility: hidden">Filled</option>
    </select></label>

    <!-- if we were to manually control RGR parameters -->
    <!-- Trace weight: <input type="number" id="weightId" value="5" min="1" max="10" style="width: 30px"> -->
    <!-- Color emph.: <input type="number" id="mId" value="5" min="1" max="10" style="width: 30px"> -->
    <button type="button" id="btnRefine" onclick="callRefineCustom();" style="margin-right:20px">Grow traces</button>

  </div>

  <!-- scorebars for each category, also dynamically populated -->
  <div id="container" class="noselect">
        <canvas id="imageView" >
        <p>Unfortunately, your browser is currently unsupported by our web application.  </p></canvas>        
        <div id="barContainer" style="display: inline-block; position: relative; vertical-align:top;">
            <svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="150" height="500">
            </svg>            
        </div>      
  </div>

  <div id="sliders" class="noselect">
    <label for="opacity-slider">Opacities - Image: </label>
      <input type="range" min="0" max="1" value="1" id="dtran" step="0.01" onchange="changeImgTran()" style="position: relative; top:10px; width: 100px">  
    <label for="opacity-slider">Masks: </label>
      <input type="range" min="0" max="1" value="1" id="dtranM" step="0.01" onchange="changeImgTran()" style="position: relative; top:10px; width: 100px">
    <p></p>
    
    <button type="button" onclick="maskOnTraces();">Mask on/off</button>

{#    <button type="button" onclick="boundingBoxOn();">Bounding box on/off</button>#}

    <button type="button" onclick="TraceOnTempCanvas();">Trace on/off</button>

    <button type="button" id="btnGTusr" onclick="toggleGTuser();" style="visibility: hidden;">Perfect/Yours</button>
  </div>

 <!--   Div and CSS for positions of background image and final mask,
          mask will be on the top of initial image.  -->
  <div id="viewOutputs" style="float: left; position: relative; top: 0; left: 0; " class="noselect">
        <!-- <img id="scoreRules" src="/static/images/scoreRules.png" style="height: 300px">  -->
        <img id="initial" style="position: absolute; top: 0; left: 0; visibility: hidden; width: 800px">
        <!-- hide maskImg if there is no result yet -->
        <img id="maskImg" style ="position: absolute; top: 0; left: 0; visibility: hidden" onerror="maskOn=false;">
  </div>

  <div id="hotkeys" style="float: left; position: relative; top: 0; left: 0; " class="noselect">
      <h3>Keyboard shortcuts:</h3>
      <p>P - Pencil <img src="/static/images/pencil4.png" style="height: 20px">
      L - Line <img src="/static/images/line4.png" style="height: 20px">
      R - Rectangle <img src="/static/images/rect4.png" style="height: 20px">
      C - Circle <img src="/static/images/circle4.png" style="height: 20px"> </p>
    <p>G - Grow Traces; Tab - Switch category;   <b>Trace size:</b> &uarr; and &darr; </p>
      <p>Toggles (On/off): M - Mask; T - traces</p>
      <p></p>
  </div>

  <!-- loading icon to indicate that refinement is running -->
  <div id="loadingIcon" style="text-align: center;background-color: white;opacity:1;display:none;width:130px;height:150px;border:1px solid black;position:absolute;top:30%;left:30%;padding:2px;"><img src='/static/images/loader.gif' width="120" height="120" /><br>Refining..</div>    

  <script type="text/javascript" src="/static/js/initGlobals.js"></script>
  <script type="text/javascript" src="/static/js/flGlobals.js"></script>
  <script type="text/javascript">     
      datasetGT = false;   
      var listGTIDs;
      // indicates if current image is GT or not, to guide computation of acc.
      gtFlag = false;       
  </script> 

  <script type="text/javascript">    
    // counter of how many images the user has already skipped
    var skipCnt = 0;
  </script>

  <script type="text/javascript" src="/static/js/scores.js"></script>
  <script type="text/javascript" src="/static/js/video.js"></script>
  <script type="text/javascript" src="/static/js/base.js"></script>
  <script type="text/javascript" src="/static/js/customsetScratch.js"></script>

  </body>
</html>
